<template>
  <div class="costDetails">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoCost()"><a><em class="before"></em><span>费用</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{type}}</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <!--<el-tabs v-model="activeName" >-->
          <!--<el-tab-pane label="管理费用" name="first"></el-tab-pane>-->
          <!--<el-tab-pane label="销售费用" name="second"></el-tab-pane>-->
          <!--<el-tab-pane label="损益类费用" name="third"></el-tab-pane>-->
        <!--</el-tabs>-->
        <table class="table table-striped">
          <tbody>
          <tr>
            <th>项目</th>
            <th>目标</th>
            <th>预测</th>
            <th>实际</th>
            <th>当月</th>
          </tr>
          <tr>
            <td>总计</td>
            <td>{{fixNum(budgetAmount)}}</td>
            <td class="text-success">{{fixNum(predictAmount)}}</td>
            <td>{{fixNum(actualAmount)}}</td>
            <td>{{fixNum(nowMonthAmount)}}</td>
          </tr>
          <tr v-for="item in detailList" @click="getDetailMonth(item.project)">
            <td>{{item.project}}</td>
            <td>{{fixNum(item.budgetAmount)}}</td>
            <td>{{fixNum(item.actualAmount*12)}}</td>
            <td>{{fixNum(item.actualAmount)}}</td>
            <td>{{fixNum(item.nowMonthIncome)}}</td>
          </tr>
          </tbody>
        </table>
        <!--<table class="table table-bordered table-hover table-striped table-sm">-->
          <!--<tr>-->
            <!--<th>项目</th>-->
            <!--<th>目标</th>-->
            <!--<th>分类</th>-->
            <!--<th>预测</th>-->
            <!--<th>实际</th>-->
            <!--<th>当月</th>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td rowspan="3">办公室</td>-->
            <!--<td rowspan="3">目标值</td>-->
            <!--<td>销售费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td>管理费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td>损益类费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td rowspan="3">办公室</td>-->
            <!--<td rowspan="3">目标值</td>-->
            <!--<td>销售费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td>管理费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td>损益类费用</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
            <!--<td>111</td>-->
          <!--</tr>-->
        <!--</table>-->
      </div>
    </div>
    <el-dialog
      :title="detailProject"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose">
      <div class="managerCon2">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="content">
                <ul class="pl-0 row ">
                  <li class="col-3" v-for="info in detailMonthList">
                    <div class="row justify-content-center">
                      <div class="title">{{info.month}}月</div>
                    </div>
                    <div class="num">
                      <div>实际值：<span >{{fixNum(info.actualAmount)}}万</span></div>
                      <div>销售：<span >{{fixNum(info.cost1)}}万</span></div>
                      <div>管理：<span >{{fixNum(info.cost2)}}万</span></div>
                      <div>损益类：<span >{{fixNum(info.cost3)}}万</span></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="detailMonthList.length==0">
        <div class="row justify-content-center">
          <img src="@/assets/img/noData.png" width="100px" class="mt-3"/>
        </div>
        <div class="row justify-content-center mt-4">暂时没有数据！</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "cost",
    data(){
      return{
        dialogVisible: false,
        type: '',
        loading: {},
        actualAmount: 0,
        nowMonthAmount: 0,
        budgetAmount: 0,
        predictAmount: 0,
        detailList: [],
        costType: '31',
        detailMonthList: [],
        detailProject: '',
        activeName: 'first'
      }
    },
    created() {
      this.type = window.sessionStorage.getItem('type')
      this.costType = this.type === '费用一' ? '31' : this.type === '费用二' ? '32' : '33'
      this.getCostDetail()
    },
    methods:{
      //跳转到首页
      gotoHome: function(){
        this.$router.push("/index")
        this.isActive=0

      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      //跳转到费用
      gotoCost: function(){
        this.$router.push("/cost");
      },
      handleClose () {
        this.dialogVisible  = false
      },
      getDetailMonth(project){
        this.dialogVisible=true
        this.$http.get(
          '/api/getCostDetailByMonth',
          {
            params: {
              project: project
            }
          }).then(res => {
          this.dialogVisible=true
          this.detailProject = project
          this.detailMonthList = res.data
        })
      },
      getCostDetail () {
        this.loading = this.$loading({
          lock: true,//lock的修改符--默认是false
          text: 'Loading',//显示在加载图标下方的加载文案
          spinner: 'el-icon-loading',//自定义加载图标类名
          background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
          target: document.querySelector('#table')//loadin覆盖的dom元素节点
        });
        this.$http.get(
          '/api/getCostDetail',
          {
            params: {
              type: this.costType
            }
          }).then(res => {
          this.actualAmount = res.data.actualAmount
          this.nowMonthAmount = res.data.nowMonthAmount
          this.budgetAmount = res.data.budgetAmount
          this.predictAmount = res.data.actualAmount*12
          this.detailList = res.data.detailList
          this.loading.close()
        })
      },
      fixNum (num) {
        return (num/10000).toFixed(2)
      },
    },

  }
</script>

<style>

  .costDetails{
    height: 220%;
    background: white;
  }
  .costDetails  table{
    margin-bottom: 0;
  }
  .costDetails table tr td,
  .costDetails table tr th{
    text-align: center !important;
    vertical-align: middle;
    cursor: pointer;
  }


  .costDetails .managerCon2 h2{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
  }
  .costDetails .managerCon2 .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 15px;
  }
  .costDetails .managerCon2 .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 18px;
    color: #95999c;
    position: relative;
    top: 17px;
    padding: 0 10px;
  }
  .costDetails .managerCon2 .content ul li .num{
    font-size: 14px;
    letter-spacing: 2px;
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 15px 10px;
    color: black;
    line-height: 24px;
  }
  .costDetails .managerCon2 .content ul li .num span{
    color: #95999c;
    font-weight: bold;
  }
  .el-dialog__body{
    padding: 0 30px 50px 30px;
  }

</style>
